import styles from './index.module.less'
import { Logs, ChartArea } from '@terminus/nusi-slim-icons'
import NodePanel from './NodePanel'
import ProcessPanel from './ProcessPanel'
import { useState } from 'react'
import { Radio } from '@terminus/nusi-slim'
import clsx from 'clsx'


const LeftPanel = () => {

	const [activeKey, setActiveKey] = useState<string>('processPanel')

	const leftPanelHeaderList = [
		{
			key: 'processPanel',
			icon: <Logs />,
			title: '流程列表',
			render: () => <ProcessPanel />,
		},
		{
			key: 'nodePanel',
			icon: <ChartArea />,
			title: '节点列表',
			render: () => <NodePanel />,
		},
	]

  return (
    <div className={styles.leftPanel}>
			<div className={styles.leftPanelHeader}>
				<div className={styles.leftPanelHeaderTitle}>
					{leftPanelHeaderList.find((item) => item.key === activeKey)?.icon}
					<span>
						{leftPanelHeaderList.find((item) => item.key === activeKey)?.title}
					</span>
				</div>
				<div className={styles.leftPanelHeaderRight}>
					<Radio.Group buttonStyle="solid" value={activeKey} onChange={(e) => setActiveKey(e.target.value)}>
						{leftPanelHeaderList.map((item) => (
							<Radio.Button key={item.key} value={item.key}>
								<div className={styles.leftPanelHeaderIcon}>
								{item.icon}
								</div>
							</Radio.Button>
						))}
					</Radio.Group>
				</div>
			</div>
			<div className={styles.leftPanelContent}>
				{leftPanelHeaderList.map((item) => (
					<div key={`${item.key}-panel`} className={clsx(styles.leftPanelContentItem, activeKey === item.key && styles.active)}>
						{item?.render?.()}
					</div>
				))}
			</div>
		</div>
	)
}

export default LeftPanel